﻿<template>
    <full-screen-dialog
        :title="titleMap[mode]"
        v-model="visible"
        :width="1300"
        destroy-on-close
        @closed="$emit('closed')"
    >
        <el-form :model="entityObj" :rules="rules" :disabled="mode == 'Show'" ref="dialogForm">
            <el-row>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="业务时间:">{{ entityObj.orderDate }}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="业务单号:">{{ entityObj.orderCode }}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="要货单位:">{{ entityObj.storeName }}</el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="供应商:">{{ entityObj.supplierName }}</el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item>
                        <el-table
                            :data="entityObj.taskOrderItems"
                            border
                            style="width: 100%"
                            show-summary
                            :row-class-name="setRowClass"
                        >
                            <el-table-column label="物料名称" min-width="150" prop="materialName"></el-table-column>
                            <el-table-column label="规格" min-width="120" prop="materialSpecs"></el-table-column>
                            <el-table-column label="单位" min-width="70" prop="unitName"></el-table-column>
                            <el-table-column label="状态" min-width="90" prop="statusDesc">
                                <template #default="scope"><span :style="{ color: scope.row.status == 2 ? 'red' : '#00c297' }">{{scope.row.statusDesc}}</span></template>
                            </el-table-column>
                            <el-table-column label="收货照片" min-width="200">
                                <template #default="scope">
                                    <el-image
                                        v-for="(item,index) in scope.row.taskFiles"
                                        :key="index"
                                        style="width: 50px; height: 40px;margin: 4px;"
                                        :src="item"
                                        :zoom-rate="1.2"
                                        :max-scale="7"
                                        :min-scale="0.2"
                                        :preview-src-list="[item]"
                                        preview-teleported="true"
                                        :z-index="9999"
                                        fit="cover"
                                    />
                                </template>
                            </el-table-column>
                            <el-table-column label="收货数量" min-width="140" prop="qty">
                                <template #default="scope">
                                    <el-input-number
                                        v-model="scope.row.qty"
                                        style="width: 100%"
                                        :precision="0"
                                        :step="1"
                                        :disabled="scope.row.status==1"
                                    ></el-input-number>
                                </template>
                            </el-table-column>
                            <el-table-column label="单价" min-width="80" prop="price"></el-table-column>
                            <el-table-column label="金额" min-width="80">
                                <template #default="scope">{{scope.row.price*scope.row.qty}}</template>
                            </el-table-column>
                            <el-table-column label="物料编码" min-width="100" prop="materialCode"></el-table-column>
                            <el-table-column label="收货单号" min-width="150" prop="taskOrderCode"></el-table-column>
                            <el-table-column label="收货人" min-width="100" prop="taskName"></el-table-column>
                            <el-table-column label="收货时间" min-width="115" prop="taskDate">
                                <template #default="scope">{{scope.row.taskDate?.slice(0,10)}}</template>
                            </el-table-column>
                            <el-table-column label="入库仓库" min-width="120" prop="warehouseName"></el-table-column>
                        </el-table>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer v-if="mode != 'Show'" >
            <el-button @click="handleBeforeClose">取 消</el-button>
            <el-button
                v-if="mode != 'show'"
                type="primary"
                :loading="isSaveing"
                @click="submit()"
            >保 存</el-button>
        </template>
    </full-screen-dialog>
</template>

<script>
import tool from "@/utils/tool";
//import taskFilesDialog from "./taskFiles";
export default {
    emits: ["success", "closed"],
    components: {
        //taskFilesDialog,
    },
    data() {
        return {
            mode: "Task",
            titleMap: {
                Send: "物料收货明细",
                Task: "物料收货明细",
            },
            entityObj: {},
            materialState: false,
            queryList: {},
            visible: false,
            isSaveing: false,
            needSaveFlag: false,
            dialogTaskFiles: false,
            //验证规则
            rules: {
                sendDate: [
                    { required: true, type: "string", message: "请填写" },
                ],
                supplierId: [
                    { required: true, type: "number", message: "请填写" },
                ],
                logisticsCode: [
                    { required: true, type: "string", message: "请填写" },
                ],
            },
            props: {
                label: "supplierName",
                value: "supplierId",
            },
            materialProps: {
                label: "materialCode",
                value: "materialId",
                items: "materialItems",
            },
            materialTypeTree: [],
            optionsSuppliers: [],
            itemsData: [],
            defaultTime: [
                new Date(2000, 1, 1, 0, 0, 0),
                new Date(2000, 2, 1, 23, 59, 59),
            ],
        };
    },
    computed: {
    },
    methods: {
        //显示=
        open(mode = "Add") {
            this.mode = mode;
            this.visible = true;
            return this;
        },
        //表单注入数据
        async setData(data) {
            this.entityObj = structuredClone(data);
        },
        setRowClass({ row }) {
            //终止
            if (row.status == 0) {
                return "selected-row-color-grey";
            }
            return "";
        },
        //审核
        async submit() {
            let taskOrderItems = this.entityObj.taskOrderItems.filter((p) => p.status == 2);
            this.isSaveing = true;
            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "task-order/audit-task-order",
                    taskOrderItems
                );
                if (returnValue.status == 200) {
                    this.$emit("saveOrder", this.entityObj);
                    this.visible = false;
                    this.isSaveing = false;
                    this.visible = false;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                    this.isSaveing = false;
                }
            } catch (error) {
                this.loading = false;
                this.isSaveing = false;
                return false;
            }
            
        },
    },
    async mounted() {},
};
</script>

<style scoped>
.el-form-item {
    margin-bottom: 8px !important;
}

.el-table .selected-row-color-grey {
    color: #000000 !important;
    text-decoration: line-through; /* 删除线 */
}
</style>
